<template>
  <div class="login-background">
    <div class="login">
      <el-row>
        <el-col :span="24">
          <div class="grid-content d6">用户注册</div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <div class="grid-content lh">用户名：</div>
        </el-col>
        <el-col :span="16">
          <div class="grid-content bg-purple-light">
            <el-input v-model="userName" placeholder="请输入内容"></el-input>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <div class="grid-content lh">密码：</div>
        </el-col>
        <el-col :span="16">
          <div class="grid-content bg-purple-light">
            <el-input v-model="userPwd" placeholder="请输入密码" show-password></el-input>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <div class="grid-content lh">确认密码：</div>
        </el-col>
        <el-col :span="16">
          <div class="grid-content bg-purple-light">
            <el-input v-model="userPwd" placeholder="请再次输入密码" show-password></el-input>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-button type="button" @click="register" class="d1">注册</el-button>
        </el-col>
      </el-row>
      <router-link to="/Login" class="d7">去登录</router-link>
      <div class="denglv">
        <ol>
          <span class="logleft"></span>
          <p class="logmid">其他登录方式</p>
          <span class="logright"></span>
        </ol>
      </div>
      <div class="other">
        <span>
          <a href="https://graph.qq.com/oauth2.0/show?which=Login&display=pc&response_type=code&client_id=101417732&redirect_uri=http://wx01.lecake.com/customer/qq-callback.html&state=1f3dd8222df266f9507133107545601b&scope=get_user_info"
            class="QQ"></a>
          <p>QQ</p>
        </span>
        <span class="middle">
          <a href="https://open.weixin.qq.com/connect/qrconnect?appid=wx379340473ba5e673&redirect_uri=https%3A%2F%2Fwww.lecake.com%2Fcustomer%2Fwx-callback.html&response_type=code&scope=snsapi_login&state=state#wechat_redirect"
            class="weixin"></a>
          <p>微信</p>
        </span>
        <span>
          <a href="http://www.weibo.com" class="weibo"></a>
          <p>微博</p>
        </span>
      </div>
    </div>
  </div>
</template>
  
<script>

export default {
  name: 'RegisterView',
  data() {
    return {
      userName: '',
      userPwd: ''
    }
  },
  methods: {
    register() {
      if (this.userName.length == 0 || this.userPwd.length == 0) {
        this.$message('用户名或密码不能空')
      }

      else {
        this.axios.post('/api/register', { userName: this.userName, userPwd: this.userPwd })
          .then(res => {
            console.log('res:', res)
            if (res.data.message == 'ok') {
              this.$message('注册成功！')
              this.$router.push({ path: '/login' })
            }
          })
      }
    }
  }
}
</script>
<style>
.login {
  width: 500px;
  border: 1px solid #ccc;
  box-shadow: 4px 4px 5px;
  margin: 10px auto;
  padding-bottom: 30px;
}

.lh {
  line-height: 36px;
}

.btnlogin {
  width: 80%;
}

.el-col {
  border-radius: 4px;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>